<template>
	<div class="createtest">
		<el-dialog title="设置试卷名" :visible.sync="centerDialogVisible" width="20%" center>
			<el-input v-model="name" placeholder="请输入内容"></el-input>
			<span slot="footer" class="dialog-footer">
				<el-button @click="centerDialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="subject()">确 定</el-button>
			</span>
		</el-dialog>
		<div class="body">
			<div class="left">
				<div class="questionTitle">题量 {{ testnum }}，总分{{ testgrade }}</div>
				<ul v-if="list.single.questionList.length > 0">
					<h4>{{ list.single.title }}</h4>
					<li v-for="(item, index) in list.single.questionList" :key="index">
						{{ index + 1 + "." + item.topic }}
					</li>
				</ul>
				<ul v-if="list.many.questionList.length > 0">
					<h4 v-if="list.many.isshow">{{ list.many.title }}</h4>
					<li v-for="(item, index) in list.many.questionList" :key="index">
						{{ index + 1 + "." + item.topic }}
					</li>
				</ul>
				<ul v-if="list.Briefanswer.questionList.length > 0">
					<h4 v-if="list.Briefanswer.isshow">{{ list.Briefanswer.title }}</h4>
					<li v-for="(item, index) in list.Briefanswer.questionList" :key="index">
						{{ index + 1 + "." + item.topic }}
					</li>
				</ul>
				<ul v-if="list.judge.questionList.length > 0">
					<h4 v-if="list.judge.isshow">{{ list.judge.title }}</h4>
					<li v-for="(item, index) in list.judge.questionList" :key="index">
						{{ index + 1 + "." + item.topic }}
					</li>
				</ul>
				<!-- <ul v-if="list.Briefanswer.questionList.length > 0">
					<h4 v-if="list.Briefanswer.isshow">{{ list.Briefanswer.title }}</h4>
					<li v-for="(item, index) in list.Briefanswer.questionList" :key="index">
						{{ index + 1 + "." + item.topic }}
					</li>
				</ul> -->
				<ul v-if="list.Blanksanswer.questionList.length > 0">
					<h4 v-if="list.Blanksanswer.isshow">{{ list.Blanksanswer.title }}</h4>
					<li v-for="(item, index) in list.Blanksanswer.questionList" :key="index">
						{{ index + 1 + "." + item.topic }}
					</li>
				</ul>
				<div style="padding: 10px; text-align: center" v-show="testnum > 0">
					<el-button type="primary" size="default" @click="centerDialogVisible = true">确认组卷</el-button>
				</div>
			</div>
			<div class="right">
				<div class="top">
					<p>添加题目</p>
					<ul>
						<li @click="ifshow = item.title" v-for="item in top" :key="item.id" :class="{ top1: ifshow == item.title }">
							{{ item.title }}
						</li>
					</ul>
					<!-- <span>智能导入</span> -->
					<span class="seletFromlibrary" @click="showLibrary">从题库选择</span>
				</div>
				<div class="buttom" v-if="ifshow == ''">点击按钮添加题目</div>
				<div class="question" v-if="ifshow == '单选题'">
					<SingleCom @addSingle="addSingle"></SingleCom>
				</div>
				<div class="question" v-if="ifshow == '多选题'">
					<MultipleCom @addMultiple="addMultiple"></MultipleCom>
				</div>
				<div class="question" v-if="ifshow == '判断题'">
					<JudgeCom @addJudge="addJudge"></JudgeCom>
				</div>
				<div class="question" v-if="ifshow == '简答题'">
					<BriefanswerCom @addBrief="addBrief"></BriefanswerCom>
				</div>
				<div class="question" v-if="ifshow == '填空题'">
					<BlanksCom @addBlank="addBlank"></BlanksCom>
				</div>
			</div>
		</div>

		<!-- 题库选题 弹出框 -->
		<el-dialog title="选题" :visible.sync="dialogVisible" width="80%" :before-close="handleClose">
			<div class="activity">
				<div class="box">
					<div class="first"></div>
					<div class="select">
						<span class="selects">
							<div class="characters" style="line-height: 40px">题型</div>
							<div class="pulldown">
								<el-select v-model="topvalue" placeholder="请选择" @click="handleClick()">
									<el-option v-for="item in top" :key="item.id" :label="item.title" :value="item.id">
									</el-option>
								</el-select>
							</div>
						</span>
						<span class="selects">
							<div class="characters" style="line-height: 40px">知识点</div>
							<div class="pulldown">
								<el-cascader v-model="valuename" :options="options" @change="handleChange">
								</el-cascader>
							</div>
						</span>

						<span>
							<div class="search">
								<el-button type="primary" size="default" @click="resetSearch">搜 &nbsp;&nbsp;&nbsp;题</el-button>
							</div>
						</span>
					</div>
					<div>
						<el-table :data="tableData" style="width: 100%; margin-top: 20px" @selection-change="handleSelectionChange">
							<el-table-column type="selection" width="55"> </el-table-column>
							<el-table-column label="题目" width="300" prop="content">
							</el-table-column>
							<el-table-column prop="question" label="题型" width="120">
								<template slot-scope="scope">{{
                  scope.row.name
                }}</template>
							</el-table-column>
							<el-table-column prop="difficulty" label="难易等级" show-overflow-tooltip>
								<template slot-scope="scope">
									<el-tag v-if="scope.row.difficulty == 1">一星</el-tag>
									<el-tag type="success" v-if="scope.row.difficulty == 2">二星</el-tag>
									<el-tag type="info" v-if="scope.row.difficulty == 3">三星</el-tag>
									<el-tag type="warning" v-if="scope.row.difficulty == 4">四星</el-tag>
									<el-tag type="danger" v-if="scope.row.difficulty == 5">五星</el-tag>
								</template>
							</el-table-column>
							<el-table-column prop="usage" label="知识点" show-overflow-tooltip>
								<template slot-scope="scope">
									<span v-for="Item in scope.row.knowledgeList[0]" :key="Item.value">{{Item.label}}</span>

								</template>
							</el-table-column>
							<el-table-column prop="correct" label="正确率" show-overflow-tooltip>
								<template slot-scope="">{{ Math.floor(Math.random() * 101) }}%</template>
							</el-table-column>
							<el-table-column prop="userName" label="创建者" show-overflow-tooltip>
							</el-table-column>
							<!-- <el-table-column prop="singleCreateTime" label="创建时间" show-overflow-tooltip>
							</el-table-column> -->
						</el-table>
					</div>
					<div>
						<el-pagination background layout="prev, pager, next" :total="searchOption.total" :current-page="searchOption.currentPage"
						 @current-change="currentChange">
						</el-pagination>
					</div>
				</div>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button @click="Close1()">关闭窗口</el-button>
				<el-button type="primary" @click="confirmAddQuestion">添加选中题目</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	import SingleCom from "@/components/Questions/SingleCom.vue";
	import MultipleCom from "@/components/Questions/MultipleCom.vue";
	import BlanksCom from "@/components/Questions/BlanksCom.vue";
	import BriefanswerCom from "@/components/Questions/BriefanswerCom.vue";
	import JudgeCom from "@/components/Questions/JudgeCom.vue";
	var getToken = window.localStorage.getItem("token");
	import {
		Message
	} from "element-ui";
	import {
		TestManager
	} from '../../request/test.js'
	export default {
		components: {
			SingleCom,
			MultipleCom,
			JudgeCom,
			BlanksCom,
			BriefanswerCom,
		},
		data() {
			return {
				ifshow: "",
				difficultyShow: false,
				list: {
					single: {
						title: "单选题",
						isshow: true,
						questionList: [],
					},
					many: {
						title: "多选题",
						isshow: true,
						questionList: [],
					},
					judge: {
						title: "判断题",
						isshow: true,
						questionList: [],
					},
					Briefanswer: {
						title: "简答题",
						isshow: true,
						questionList: [],
					},
					Blanksanswer: {
						title: "填空题",
						isshow: true,
						questionList: [],
					},
				},
				question: {
					fraction: "1",
					topic: "请输入标题",
					options: ["1", "2", "3", "4"],
					parsing: "",
					difficulty: "易",
				},
				input: "试卷名称",
				letter: ["A", "B", "C", "D", "E", "F", "G", "H", "R", "J", "K", "L"],
				name: '',
				knowledge: "no",
				checkedCities: "",
				domains1: [{
						value: "正确",
					},
					{
						value: "错误",
					},
				],
				inputp: "",
				letter1: ["√", "×"],
				value1: "",
				options: [],
				valuename: "",
				toolbars: {
					bold: true, // 粗体
					italic: true, // 斜体
					header: true, // 标题
					underline: true, // 下划线
					strikethrough: true, // 中划线
					mark: true, // 标记
					superscript: true, // 上角标
					subscript: true, // 下角标
					quote: true, // 引用
					ol: true, // 有序列表
					ul: true, // 无序列表
					link: true, // 链接
					imagelink: true, // 图片链接
					code: false, // code
					table: true, // 表格
					fullscreen: false, // 全屏编辑
					readmodel: true, // 沉浸式阅读
					htmlcode: true, // 展示html源码
					help: true, // 帮助
					/* 1.3.5 */
					undo: true, // 上一步
					redo: true, // 下一步
					trash: true, // 清空
					save: true, // 保存（触发events中的save事件）
					/* 1.4.2 */
					navigation: true, // 导航目录
					/* 2.1.8 */
					alignleft: true, // 左对齐
					aligncenter: true, // 居中
					alignright: true, // 右对齐
					/* 2.2.1 */
					subfield: false, // 单双栏模式
					preview: true, // 预览
					toolbarsFlag: false,
				},
				single: [],
				multipleList: [],
				judgeList: [],
				fillsList: [],
				shortAnswer: [],
				istop: false,
				top: [

					{
						title: "单选题",
						id: 1,
					},
					{
						title: "多选题",
						id: 2,
					},
					{
						title: "判断题",
						id: 3,
					},
					{
						title: "简答题",
						id: 5,
					},
					{
						title: "填空题",
						id: 4,
					},

				],
				question1: [],
				answertype: "",
				//   testnum: 0,
				centerDialogVisible: false,
				inputtime: 60,
				dialogVisible: false,
				checked: false,
				input: "",
				number: 0,
				tableData: [],
				multipleSelection: [],
				topvalue: "单选题",
				option: [],
				searchOption: {
					currentPage: 1,
					pageSize: 10,
					qtype: "",
					value: "",
					label: "",
					total: 0, //搜素数量
				},
				selectionQuestion: [],
				TestId: ''
			};
		},
		computed: {

			testgrade() {
				// 5种不同类型题目 归并 求分数
				const singlePoint = this.list.single.questionList.reduce(function(
						prev,
						cur
					) {
						return cur.score + prev;
					},
					0);

				const manyPoint = this.list.many.questionList.reduce(function(
						prev,
						cur
					) {
						return cur.score + prev;
					},
					0);

				const judgePoint = this.list.judge.questionList.reduce(function(
						prev,
						cur
					) {
						return cur.score + prev;
					},
					0);
				const BriefPoint = this.list.Briefanswer.questionList.reduce(function(
						prev,
						cur
					) {
						return cur.score + prev;
					},
					0);
				const BlanksPoint = this.list.Blanksanswer.questionList.reduce(function(
						prev,
						cur
					) {
						return cur.score + prev;
					},
					0);
				return singlePoint + manyPoint + judgePoint + BriefPoint + BlanksPoint;
			},
			testnum() {
				// 统计总题目
				return (
					this.list.single.questionList.length +
					this.list.many.questionList.length +
					this.list.judge.questionList.length +
					this.list.Briefanswer.questionList.length +
					this.list.Blanksanswer.questionList.length
				);
			},
		},
		created() {
			if (this.list.single.questionList) {
				this.list.single.isshow = true;
			} else {
				this.list.single.isshow = false;
			}
			if (this.list.many.questionList) {
				this.list.many.isshow = true;
			} else {
				this.list.many.isshow = false;
			}
			// this.Inint1();
		},

		methods: {
			Close1() {
				this.topvalue = "单选题";
				this.dialogVisible = false;
				// alert(12);

			},
			currentChange(pageNum) {
				// 搜索分页变化
				console.log(pageNum);
				this.selectionQuestion = [];
				this.searchOption.currentPage = pageNum;
				this.searchQuestion(); // 发起搜素
			},
			confirmAddQuestion() {
				this.$message({
					message: '添加成功',
					type: 'success'
				});
				// 将选中的数据 添加过来
				let qtype = this.topvalue;
				if (this.topvalue == '单选题') {
					qtype = 1;
				}
				console.log("题型", qtype);

				const data = this.selectionQuestion.map((q) => {
					return {
						id: q.id,
						topic: q.content,
						score: q.score,
					};
				});

				if (qtype === 1) {
					// 添加单选题

					this.list.single.questionList =
						this.list.single.questionList.concat(data);
				} else if (qtype === 2) {
					// 多选题目搜索
					console.log("多选");
					this.list.many.questionList = this.list.many.questionList.concat(data);
				} else if (qtype === 3) {
					// 判断题
					console.log("判断");
					this.list.judge.questionList =
						this.list.judge.questionList.concat(data);
				} else if (qtype === 5) {
					// 简答题
					this.list.Briefanswer.questionList =
						this.list.Briefanswer.questionList.concat(data);
				} else if (qtype === 4) {
					// 填空题目
					this.list.Blanksanswer.questionList =
						this.list.Blanksanswer.questionList.concat(data);
				}

			},
			handleSelectionChange(list) {
				// 选择题目
				console.log(list);

				this.selectionQuestion = list.slice();
			},
			getsingle() {
				var parmas = {
					"topicId": 1
				}
				TestManager.getQuestionList(this.searchOption.currentPage, this.searchOption.pageSize, parmas).then((res) => {

					if (res.data.data.dataList) {
						this.tableData = res.data.data.dataList;
					} else {
						this.tableData = [];
					}
					this.searchOption.total = res.data.data.total;
				});


			},
			resetSearch() {
				// 每次点击搜索 按钮的时候 默认发起一起新的搜索
				this.searchOption.currentPage = 1;
				this.searchQuestion(); // 发起搜素
			},
			searchQuestion() {
				let qtype = this.topvalue;
				// 从题库导入 搜索题目
				if (this.topvalue == '单选题') {
					qtype = 1;
				}

				const currentPage = this.searchOption.currentPage;
				const pageSize = this.searchOption.pageSize;
				const knowledgeId = this.valuename;
				let url;
				if (this.valuename == null) {
					url = "/question/getQuestionList?currentPage=" + currentPage + "&pageSize=" + pageSize;
				} else {
				
					url = "/question/getQuestionList?currentPage=" + currentPage + "&pageSize=" + pageSize + "&knowledgeId=" +
						knowledgeId[knowledgeId.length - 1];
				}

				if (url !== "") {
					this.axios
						.post(
							url, {
								"topicId": qtype
							}, {
								headers: {
									token: window.localStorage.getItem("token"),
									"Content-Type": "application/json;charset=utf-8",
								},
							}
						)
						.then((res) => {
							console.log(res.data.data);
							this.tableData = res.data.data.dataList;
							console.log(res.data.data.total);
							this.searchOption.total = res.data.data.total;
							// console.log(res.data.data.dataList);
							// this.options = res.data.data.dataList;
						});
				}
			},
			showLibrary() {
				this.dialogVisible = true;
				this.Inint1();
				this.getsingle(); // 初始化弹窗 加载10条单选题
			},
			handleClose() {
				// 关闭选择题库
			},
			addSingle(qData) {
				// qData 包含了 题目的id 和题目的名称 直接推入 题目列表
				this.list.single.questionList.push(qData);
			},
			addMultiple(qData) {
				this.list.many.questionList.push(qData);
			},
			addJudge(qData) {
				this.list.judge.questionList.push(qData);
			},
			addBrief(qData) {
				this.list.Briefanswer.questionList.push(qData);
			},
			addBlank(qData) {
				this.list.Blanksanswer.questionList.push(qData);
			},
			//获取知识点
			Inint1() {

				TestManager.getAllKnowledgeTree()
					.then(res => {
						console.log(res.data.data)
						this.options = res.data.data;
					})
			},

			handleChange(value) {
				console.log(this.valuename);
			},
			complete(type) {
				if (type == "single") {
					var ptions = [];
					var pitem = {};
					for (let i = 0; i < this.domains.length; i++) {
						pitem.optionItem = this.domains[i].value;
						pitem.optionContent = this.letter[i];
						ptions.push(pitem);
					}
					var data = {
						content: this.question.topic,
						options: JSON.stringify(ptions),
						answer: this.checkedCities.value,
						parsing: this.question.parsing,
						difficulty: this.value1,
						score: parseInt(this.question.fraction),
						knowledgeId: this.valuename[1],
						author: this.inputp,
					};
					this.axios
						.post("/question/single/addSingle", data, {
							headers: {
								token: getToken,
								"Content-Type": "application/json;charset=utf-8",
							},
						})
						.then((res) => {
							console.log(res.data);
							this.single.push(res.data.data);
						});
					var k = JSON.parse(JSON.stringify(this.question.topic));
					this.question1 = {
						topic: k,
					};
					this.list.single.questionList.push(this.question1);
					// this.testgrade += parseInt(this.question.fraction);
					// this.testnum += 1;
					this.ifshow = "展示";
				} else if (type == "many") {
					var ptions = [];
					var pitem = {};
					for (let i = 0; i < this.domains.length; i++) {
						pitem.optionItem = this.domains[i].value;
						pitem.optionContent = this.letter[i];
						ptions.push(pitem);
					}
					var data = {
						content: this.question.topic,
						options: JSON.stringify(ptions),
						answer: this.checkedCities.value,
						parsing: this.question.parsing,
						difficulty: this.value1,
						score: parseInt(this.question.fraction),
						knowledgeId: this.valuename[1],
						author: this.inputp,
					};
					this.axios
						.post("/question/multiple/addMultiple", data, {
							headers: {
								token: window.localStorage.getItem("token"),
								"Content-Type": "application/json;charset=utf-8",
							},
						})
						.then((res) => {
							this.multipleList.push(res.data.data);
							// console.log(res);
						});

					var k = JSON.parse(JSON.stringify(this.question.topic));
					this.question1 = {
						topic: k,
					};
					this.list.many.questionList.push(this.question1);
					// this.testgrade += parseInt(this.question.fraction);
					// this.testnum += 1;
					this.ifshow = "展示";
				} else if (type == "judge") {
					var data = {
						content: this.question.topic,
						answer: this.checkedCities.value == "正确" ? 1 : 0,
						parsing: this.question.parsing,
						difficulty: this.value1,
						score: parseInt(this.question.fraction),
						knowledgeId: this.valuename[1],
						author: this.inputp,
					};
					this.axios
						.post("/question/judge/modifyJudge", data, {
							headers: {
								token: window.localStorage.getItem("token"),
								"Content-Type": "application/json;charset=utf-8",
							},
						})
						.then((res) => {
							this.judgeList.push(res.data.data);
						});

					this.question1 = {
						topic: this.question.topic,
					};
					this.list.many.questionList.push(this.question1);
					// this.testgrade += parseInt(this.question.fraction);
					// this.testnum += 1;
					this.ifshow = "展示";
				} else if (type == "Briefanswer") {
					var data = {
						content: this.question.topic,
						answer: this.answertype,
						parsing: this.question.parsing,
						difficulty: this.value1,
						score: parseInt(this.question.fraction),
						knowledgeId: this.valuename[1],
						author: this.inputp,
					};
					this.axios
						.post("/question/short_answer/addShortAnswer", data, {
							headers: {
								token: window.localStorage.getItem("token"),
								"Content-Type": "application/json;charset=utf-8",
							},
						})
						.then((res) => {
							this.shortAnswer.push(res.data.data);
						});

					this.question1 = {
						topic: this.question.topic,
					};
					this.list.Briefanswer.questionList.push(this.question1);
					// this.testgrade += parseInt(this.question.fraction);
					// this.testnum += 1;
					this.ifshow = "展示";
				}
				// this.ifshow = "";
				this.inputp = "";
				this.question.topic = "请输入标题";
				this.domains = [{
						value: "替换为错误项",
					},
					{
						value: "替换为错误项",
					},
					{
						value: "替换为错误项",
					},
					{
						value: "替换为错误项",
					},
				];
				this.valuename = "";
				this.question.parsing = "";
				this.value1 = "";
				this.question.fraction = 1;
			},
			submitForm(formName) {
				var data = {
					content: this.ruleForm.input,
					options: JSON.stringify([{
							optionItem: "A",
							optionContent: "xxx",
						},
						{
							optionItem: "B",
							optionContent: "xxx",
						},
						{
							optionItem: "C",
							optionContent: "xxx",
						},
						{
							optionItem: "D",
							optionContent: "xxx",
						},
					]),
					answer: this.ruleForm.input,
					parsing: this.ruleForm.analysis,
					difficulty: this.value1,
					score: this.num,
					knowledgeId: 1,
				};
				axios
					.post("/question/single/addSingle", data, {
						headers: {
							token: getToken(),
							"Content-Type": "application/json;charset=utf-8",
						},
					})
					.then((res) => {
						// this.ruleForm = res
						console.log(res);
					});
			},
			addDomain() {
				this.domains.push({
					value: "替换为错误项",
					key: Date.now(),
				});
			},
			removeDomain(item) {
				var index = this.domains.indexOf(item);
				if (index !== -1) {
					this.domains.splice(index, 1);
				}
			},
			Rest() {
				this.inputp = "";
				this.question.topic = "请输入标题";
				this.domains = [{
						value: "替换为错误项",
					},
					{
						value: "替换为错误项",
					},
					{
						value: "替换为错误项",
					},
					{
						value: "替换为错误项",
					},
				];
				this.valuename = "";
				this.question.parsing = "";
				this.value1 = "";
				this.question.fraction = 1;
			},
			//创建试卷
			subject() {
				this.centerDialogVisible = false;
				// alert(1);
				var testPaperContent = {};
				testPaperContent.singleList = this.list.single.questionList.map(
					(q) => q.id
				);
				this.list.single.questionList= [];
				testPaperContent.multipleList = this.list.many.questionList.map(
					(q) => q.id
				);
				this.list.many.questionList= [];
				testPaperContent.judgeList = this.list.judge.questionList.map(
					(q) => q.id
				);
				this.list.judge.questionList= [];
				testPaperContent.fillsList = this.list.Blanksanswer.questionList.map(
					(q) => q.id
				);
				this.list.Blanksanswer.questionList= [];
				testPaperContent.shortAnswer = this.list.Briefanswer.questionList.map(
					(q) => q.id
				);
				this.list.Briefanswer.questionList= [];
				var test = [];
				test.push(...testPaperContent.singleList);
				test.push(...testPaperContent.multipleList);
				test.push(...testPaperContent.judgeList);
				test.push(...testPaperContent.fillsList);
				test.push(...testPaperContent.shortAnswer);
				console.log(test);
				var data = {
					name: this.name,
					type: 1,
					content: test.join(',')
				};
				this.axios
					.post("/test_paper/addTestPaper", data, {
						headers: {
							token: getToken,
							"Content-Type": "application/json;charset=utf-8",
						},
					})
					.then((res) => {
						this.$alert("组卷成功", "成功", {
							confirmButtonText: "确定",
							callback: (action) => {
								// this.$message({
								//   type: 'info',
								//   message: `action: ${action}`
								// })
							},
						});
						console.log(res);
						localStorage.setItem("TestId", res.data.data);

					});
			},
		},
	};
</script>

<style scoped="scoped" lang="scss">
	.top1 {
		color: #03d3bd;
		font-size: 1.125rem;
	}

	.createtest {
		/* height: 100vh; */
		width: 100%;
		background-color: #f2f4f7;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.nav {
		height: 40px;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		color: white;
		background-color: #03d3bd;
		position: relative;
	}

	.nav .btn {
		height: 100%;
		width: 60px;
		display: flex;
		justify-content: center;
		align-items: center;
		position: absolute;
		right: 100px;
		background-color: #ffaa00;
		cursor: pointer;
	}

	.title {
		min-width: 1030px;
		height: 100px;
		width: 80%;
		/* border: 1px solid #000; */
		margin-top: 20px;
		background-color: white;
		display: flex;
		align-items: center;
	}

	.title>.el-input {
		margin-left: 0.625rem;
		margin-right: 0.625rem;
		color: #000000;
		font-size: 1.25rem;
		outline: none;
	}

	.body {
		min-width: 1030px;
		margin-top: 20px;
		height: 80%;
		width: 80%;
		display: flex;
	}

	.body .left {
		overflow: auto;
		padding-bottom: 20px;
		min-width: 240px;
		height: 100vh;
		width: 20%;
		border-radius: 10px;
		background-color: white;
		flex-shrink: 0;
		box-sizing: border-box;
		font-size: 0.75rem;
		margin-right: 0.625rem;
		/* border: 1px solid #000; */
	}

	.body .left ul {
		margin: 0;
		padding: 10px;
		width: 100%;
	}

	.body .right {
		min-width: 700px;
		margin-left: 25px;
		/* flex: 1; */
		width: calc(80% - 25px);
		display: flex;
		flex-direction: column;
	}

	.body .right .top {
		background-color: white;
		/* border: 1px solid #000; */
		width: 100%;
		height: 80px;
		border-radius: 10px;
		display: flex;
		align-items: center;
		justify-content: space-around;
	}

	.body .right .top li {
		list-style: none;
		display: inline-block;
		height: 30px;
		width: 80px;
		border-radius: 30px;
		/* border: 1px solid #000; */
		text-align: center;
		line-height: 30px;
		cursor: pointer;
	}

	.body .right .buttom {
		flex: 1;
		color: #d8d8d9;
		display: flex;
		justify-content: center;
		margin-top: 20px;
	}

	.body .right .question {
		margin-top: 20px;
		/* border: 1px solid #000; */
		border-radius: 10px;
		flex: 1;
		background-color: white;
		position: relative;
	}

	.body .right .question .type {
		display: flex;
		overflow: hidden;
		flex-direction: column;
		height: 450px;
		margin: 10px 10px;
		position: relative;
	}

	.body .right .question .type .remove {
		height: 40px;
		width: 40px;
		display: flex;
		justify-content: center;
		align-items: center;
		position: absolute;
		right: -10px;
		top: -10px;
	}

	.body .right .question .type .remove:hover {
		color: #03d3bd;
	}

	.body .right .question .type span {
		margin: 10px 10px;
	}

	.body .right .question .type span input {
		width: 30px;
		height: 20px;
		outline: transparent;
	}

	.body .right .question .type>input {
		width: 98%;
		height: 60px;
		/*  border: 1px solid #000; */
		padding: 10px;
		outline: transparent;
	}

	.body .right .question .options {
		flex: 1;
		display: flex;
		flex-direction: column;

		/* margin-bottom: 2.5rem; */
	}

	.option {
		flex: 1;
		display: flex;
		flex-direction: column;
		margin-bottom: 0.9375rem;
	}

	.body .right .question .options .el-input {
		width: 300px;
	}

	.body .right .question .options>span {
		width: 100%;
		height: 80px;
		display: block;
		display: flex;
		align-items: center;
		padding-left: 10px;
	}

	.body .right .question .options>span>p {
		/*  border: 1px solid #ebeef5; */
		height: 40px;
		width: 40px;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.body .right .question .options .add {
		margin: 0 10px;
	}

	.body .right .question .options .add p {
		color: #03d3bd;
	}

	.body .right .question .options .add>.el-input {
		width: 100%;
		margin: 5px 0;
	}

	.difficulty {
		position: relative;
	}

	.difficulty span {
		/* border: 1px solid #000; */
		display: inline-block;
		width: 60px;
		height: 30px;
		line-height: 30px;
		position: relative;
		background: white;
	}

	.difficulty span>i {
		position: absolute;
		right: 0;
		top: 25%;
		cursor: pointer;
	}

	.difficulty .difficultyType {
		/* border: 1px solid #000; */
		width: 60px;
		position: absolute;
		top: 0;
		left: 99px;
	}

	.difficulty .difficultyType li {
		display: block;
		list-style: none;
		cursor: pointer;
	}

	.difficulty .difficultyType li:hover {
		background-color: #a7cafa;
	}

	.question .btn {
		/* position: absolute; */
		float: left;
		width: 100px;
		height: 40px;
		text-align: center;
		line-height: 40px;
		border-radius: 5px;
		/* border: 1px solid #ebeef5; */
	}

	.question .btn:hover {
		background-color: #03d3bd;
		color: white;
	}

	.question .reset {
		bottom: 0;
		top: 50px;
		right: 0px;
		/* left: 450px; */
	}

	.question .finish {
		bottom: 0;
		top: 50px;
		right: 0px;
	}

	.button {
		width: 40px;
		height: 39px;
		background-color: #ff4949;
		color: #fff;
		text-align: center;
		padding-left: 10px;
		margin-left: 10px;
		margin-top: 20px;
	}

	/* 题目列表 */
	.left .questionTitle {
		margin-top: 10px;
		display: flex;
		justify-content: center;
	}

	.left ul li {
		list-style: none;
		margin-top: 1.25rem;
	}

	.left ul {
		width: 100%;
		/* border: 1px solid #000; */
	}

	.main {
		display: flex;
		margin-bottom: 0.625rem;
		margin-top: 1.625rem;
		/* margin-top: 0.625rem; */
	}

	a {
		text-decoration: none;
		color: #b4cdde;
	}

	.activity {
		width: 100%;
		height: 100%;
		/* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04); */
		border-radius: 10px;
		background-color: white;
		display: flex;
		justify-content: center;
	}

	.box {
		width: 96%;
		height: 96%;
		display: flex;
		flex-direction: column;
		overflow: hidden;
	}

	.first {
		display: flex;
		width: 100%;
		height: 10%;
		margin-bottom: 10px;
		margin-top: 0.625rem;
		align-items: center;
		justify-content: space-between;
	}

	.row>button {
		border-radius: 40px;
		border: 1px solid #c9dfff;
		color: #03d3bd;
	}

	.row>button:nth-child(2) {
		margin-left: 1.5vw;
	}

	.row>button:nth-child(3) {
		margin-left: 2.5vw;
	}

	.row>.roww {
		color: #fff;
		background-color: #03d3bd;
		border: none;
		margin-left: 0;
	}

	.input {
		border: 1px solid #aaa;
		height: 40px;
		line-height: 40px;
		border-radius: 20px;
	}

	.input>input {
		border: none;
		margin-left: 10px;
	}

	.input>i {
		color: #aaa;
		margin-right: 10px;
	}

	.firstright {
		width: 35%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.pulldown {
		margin-left: 10px;
	}

	.select {
		display: flex;
	}

	.characters {
		/* line-height: 3vh; */
	}

	.selects {
		display: flex;
		width: 30%;
	}

	.title {
		width: 100%;
		margin-top: 30px;
		margin-bottom: 10px;
		display: flex;
		justify-content: space-between;
		color: #aaa;
	}

	.seletFromlibrary {
		padding: 7px 10px;
		border-radius: 5px;
		border: 1px solid #aaa;
		cursor: pointer;

		&:hover {
			background: #03d3bd;
			color: #fff;
			border: 1px solid #03d3bd;
		}
	}

	/* 设置滚动条的样式 */
	::-webkit-scrollbar {
		width: 5px;
	}

	/* 滚动槽 */
	::-webkit-scrollbar-track {
		-webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.3);
		border-radius: 5px;
	}

	/* 滚动条滑块 */
	::-webkit-scrollbar-thumb {
		border-radius: 10px;
		background: rgba(0, 0, 0, 0.1);
		-webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.5);
	}

	::-webkit-scrollbar-thumb:window-inactive {
		background: rgba(236, 246, 255, 0.4);
	}
</style>
